<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录</title>
		<meta name="viewport"
			content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<script src="js/vue.min.js?v=21"></script>
		<script src="js/jquery.min.js?v=21"></script>
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<!-- vantUi框架 -->
		<link rel="stylesheet" type="text/css" href="vant-ui@2.11/index.css" />
		<script src="vant-ui@2.11/vant.min.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<!-- 写样式 -->
	<style>
	.all{
		display: flex;
		flex-direction: column;
		width: 100%;
		align-items: center;
	}
	.text-logo{
		font-size: 50px;
		margin-top: 80px;
	}
	.input-user{
		width: 86%;
		height: 35px;
		margin-top: 20px;
		border-radius: 20px;
		border: #ccc solid 1px;
		padding-left: 10px;
	}
	
	.btn-login{
		width: 90%;
		height: 40px;
		margin-top: 30px;
		background: #00BCD4;
		color: #fff;
		border: none;
		border-radius: 20px;
	}
	
	.bottom{
		display: flex;
		flex-direction: row;
		width: 84%;
		margin-top: 30px;
	}
	.wjmm-text{
		color: #2876EB;
		font-size: 12px;
	}
	
	.zc-text{
		flex: 1;
		color: #2876EB;
		font-size: 12px;
		text-align: right;
	}
	
	.password-view{
		width: 88%;
		display: flex;
		flex-direction: row;
		align-items: center;
		border: #a8a8a8 solid 1px;
		padding: 7px 0;
		border-radius: 20px;
		margin-top: 20px;
	}
	
	.img-eye{
		width: 25px;
		height: 25px;
	}
	
	.password-input{
		width: 85%;
		border: none;
		padding-left: 5px;
	}

	</style>

	<body>
		<!-- 布局 -->
		<div id="root">
			<div class="all">
				<!-- LOGO -->
				<div class="text-logo">LOGO</div>
				<!-- 用户名 -->
				<input v-model="username" class="input-user" placeholder="请输入用户名"/>
				<!-- 密码 -->
				<div class="password-view">
					<input v-model="password" class="password-input" :type="type" placeholder="请输入密码"/>
					<img v-if="isHide" @click="clickEye" src="img/n_eye.png" class="img-eye"/>
					<img v-else @click="clickEye" src="img/cc-eye.png" class="img-eye"/>
				</div>
				<!-- <input type="password" class="input-user" placeholder="请输入密码"/> -->
				<!-- 登录 -->
				<button class="btn-login" @click="login">登录</button>
				<!-- 忘记密码、注册 -->
				<div class="bottom">
					<div class="wjmm-text">忘记密码？</div>
					<div class="zc-text" @click="toZhuce">立即注册</div>
				</div>
			</div>
		</div>
		
		<!-- 逻辑 -->
		<script>
		new Vue({
			el:"#root",
			data() {
				return{
					username:'',//用户名
					password:'',//密码
					isHide:true,//判断是否隐藏密码
					type:'password',
				}
			},
			// 方法
			methods:{
				
				// 去注册
				toZhuce(){
					// 跳转方法
					window.location.href = 'zhucePage.html'
				},
				
				// 点击眼睛
				clickEye(){
					this.isHide = !this.isHide
					if(this.isHide){
						this.type = 'password'
					}else{
						this.type = 'text'
					}
				},
				
				// 登录
				login(){
					if(this.username == ''){
						alert("用户名不能为空")
						return
					}
					if(this.password == ''){
						alert("密码不能为空")
						return
					}
					alert("登录成功！")
					// 跳转并销毁当前页
					window.location.replace("mainPage.html")
					// window.location.href = 'mainPage.html'
				},
			},
			// 初始化
			mounted(){
				
			}
		})
		</script>
	</body>
</html>
